<template>
    <div class="orderContainer">
        <div class="orderContent">
            <div class="back" @click="goBack"></div>
            <p class="title">收货地址</p>
            <div class="other"></div>
        </div>
        <div class="addressContainer">
            <ul class="allAddress">
                <li v-for="user in users" :key="user.id">
                    <div class="address">
                        <div class="notCheck" v-if="user.isDefault==0" @click="ifCheck(user.id)"></div>
                        <div class="check" v-if="user.isDefault==1" @click="ifCheck(user.id)"></div>
                        <div class="user">
                            <div class="basicInfo">
                                <p class="name">{{ user.consignee }}<span v-if="user.sex=='男'">先生</span><span v-if="user.sex=='女'">女士</span></p>
                                <p class="phone">{{ user.phone }}</p>
                            </div>
                            <div class="myAddressContainer">
                                <p class="myAdd">{{ user.provinceName }}{{ user.cityName }}{{user.districtName}}{{ user.detail }}</p>
                            </div>
                        </div>
                        <div class="default" v-if="user.isDefault==1"></div>
                        <div class="edit"></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="addAddressContainer">
            <div class="address">
                <div class="addAddressImg" @click="gotoAdd"></div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
    export default {
        name:'myOrder',
        data(){
            return{
                users:[
                    // {id:0,name:'VVvVOK',phone:19357907217,address:'四川省成都市龙泉驿区十陵上街2025号成都大学',isCheck:false},
                    // {id:1,name:'VVvVOK',phone:19357907217,address:'四川省成都市龙泉驿区十陵上街2025号成都大学',isCheck:true},
                    // {id:2,name:'VVvVOK',phone:19357907217,address:'四川省成都市龙泉驿区十陵上街2025号成都大学',isCheck:true},
                    // {id:3,name:'VVvVOK',phone:19357907217,address:'四川省成都市龙泉驿区十陵上街2025号成都大学',isCheck:true},
                ]
            }
        },
        methods:{
            goBack(){
                let id=0
                for(let i=0;i<this.users.length;i++){
                    if(this.users[i].isDefault==1){
                        id=this.users[i].id
                    }
                }
                axios({
                    method:'put',
                    url:'http://localhost:8080/polycystic/addressBook/default',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                    data:{
                        id:id
                    }

                })
                this.$router.back()
            },
            ifCheck(id){
                for(let i=0;i<this.users.length;i++){
                    this.users[i].isDefault=0
                    if(this.users[i].id===id){
                        this.users[i].isDefault=1
                    }
                }
            },
            gotoAdd(){
                this.$router.push({
                    name:'changeAddress'
                })
            }
        },
        mounted(){
            // this.$bus.$on('getAddress',(data)=>{
            //     this.users.push({
            //         id:this.users.length,
            //         name:data.name,
            //         phone:data.phone,
            //         address:data.address,
            //         isCheck:!data.isCheck
            //     })
            //     if(data.isCheck===true){
            //         for(let i=0;i<this.users.length-1;i++){
            //             if(this.users[i].isCheck===false){
            //                 this.users[i].isCheck=true
            //             }
            //         }
            //     }
            // })
            axios({
                method:'get',
                url:'http://localhost:8080/polycystic/addressBook/list',
                headers:{
                    token:localStorage.getItem('jwt')
                }
            }).then(res=>{
                this.users=res.data.data
                console.log(res.data);
            })
        },
        beforeDestroy(){
            this.$bus.$off('getAddress')
        }
    }
</script>

<style scoped>
    .orderContainer{
        width: 100vw;
    }
    .orderContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: .72rem;
    }
    .addressContainer{
        width: 100vw;
        background-color: #FFF;
        overflow: hidden;
    }
    .allAddress{
        width: 6.46rem;
        margin: 0 auto;
        margin-top: .2rem;
        margin-bottom: .2rem;
    }
    .address{
        width: 100%;
        height: 1.4rem;
        background-color: #FFF;
        margin-bottom: .2rem;
        display: flex;
        align-items: center;
        position: relative;
    }
    .notCheck{
        width: .4rem;
        height: .4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-13notCheck.png);
    }
    .check{
        width: .4rem;
        height: .4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-14check.png);
    }
    .user{
        margin-left: .2rem;
        display: flex;
        flex-direction: column;
    }
    .basicInfo{
        display: flex;
        align-items: center;
    }
    .name{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
    }
    .phone{
        font-family: 'PingFangSC-Regular';
        color:#333333;
        margin-left: .2rem;
    }
    .myAddressContainer{
        width: 93%;
    }
    .default{
        width: .56rem;
        height: .28rem;
        background-image: url(../assets/img/6-icon@2x/label/address.png);
        background-position: center;
        background-size: contain;
        float: left;
        position: absolute;
        top:.15rem;
        right:0;
    }
    .myAdd{
        font-family: 'PingFangSC-Regular';
        color:#33333371;
        font-size: 14px;
        margin-top: .06rem;
    }
    .edit{
        width: .4rem;
        height: .4rem;
        background-image: url(../assets/img/tab+logo@2x/edit.png);
        background-position: center;
        background-size: contain;
        position: absolute;
        bottom: 0;
        right: 0;
        opacity: 0.3;
    }
    .addAddressContainer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .address{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }
    .addAddressImg{
        background-image: url(../assets/img/6-icon@2x/6-24addAddress.png);
        width: 6.86rem;
        height: .84rem;
        background-position: center;
        background-size: contain;
        border-radius: .84rem;
    }
</style>